<template>
	<div class="icon-box">
		<el-input placeholder="请选择图标" v-model="value" @focus="openDialog" clearable ref="inputRef">
			<template #append>
				<div class="svg-btn" id="svgBtn" ref="virtualRef">
					<SvgIcon v-if="dict.icon_type.isSvgCustom(type)" :name="value" :iconStyle="{ width: iconSize, height: iconSize }" />
					<component v-else-if="dict.icon_type.isSvgElement(type)" :is="value" :style="{ width: iconSize }"></component>
				</div>
			</template>
		</el-input>
	</div>
	<!-- 弹出窗体 -->
	<PopoverSelectIcon ref="popoverRef" v-model:iconValue="value" v-model:iconType="type" :virtual-ref="virtualRef" />
</template>

<script setup lang="ts" name="SelectIconSlot">
import SvgIcon from '@/components/SvgIcon/index.vue'
import { ref, computed } from 'vue'
// import * as Icons from '@element-plus/icons-vue'
import PopoverSelectIcon from '@/components/PopoverSelectIcon/index.vue'
import dict from '@/utils/dict/index'

const emits = defineEmits(['update:iconValue', 'update:iconType'])

// iconSize
const iconSize = ref('1rem')

// 弹窗定位位置
const virtualRef = ref()

const openDialog = (e: any) => {
	// 直接让文本框失去焦点，不然会出现显示 bug
	e.srcElement.blur()
	document.getElementById('svgBtn')?.click()
}

const popoverRef = ref()

// 接收参数
const props = defineProps<{ iconValue: string; iconType: string }>()

const value = computed({
	get() {
		return props.iconValue
	},
	set(val) {
		emits('update:iconValue', val)
	}
})

const type = computed({
	get() {
		return props.iconType
	},
	set(val) {
		emits('update:iconType', val)
	}
})
</script>

<style scoped lang="scss">
@import './index.scss';
.svg-btn {
	display: flex;
}
</style>
